<template>
  <!-- 卡片区域开始 -->
  <div class="card">
    <!-- 标题区域 -->
    <div class="card-header">
      学习计划表
    </div>
    <!-- 提交区域 -->
     <div class="card-body">
      <form @submit.prevent="add">
        <div class="row g-4">
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习科目</span>
              <input type="text" class="form-control" placeholder="请输入学习科目"
              v-model.trim="subject" >
            </div>
          </div>
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习内容</span>
              <textarea type="text" class="form-control" placeholder="请输入学习内容"
              v-model.trim="content" :style="{height: '32px'}" />
            </div>
          </div>
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习地点</span>
              <select class="form-select form-select-sm" v-model="selectOption">
                <option v-for="option in options" :key="option.placeCode"
                 :value="option.place">{{ option.place }}</option>
              </select>
            </div>
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-primary">添加</button>
          </div>
        </div>
      </form>
     </div>
  </div>
  <!-- 卡片区域结束 -->

  <!-- 表格区域 -->
  <table class="table table-striped table-hover table-bordered">
    <thead>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">学习科目</th>
        <th scope="col">学习内容</th>
        <th scope="col">学习地点</th>
        <th scope="col">学习状态</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这是一行 -->
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.subject }}</td>
        <td>{{ item.content }}</td>
        <td>{{ item.place }}</td>
        <td>
          <div class="form-check form-switch">
            <input type="checkbox" class="form-check-input" role="switch" 
            :id="'cb'+ item.id" v-model="item.status">

            <label :for="'cb'+ item.id" class="form-check-label" 
            v-show="item.status">已完成</label>

            <label :for="'cb'+ item.id" class="form-check-label" 
            v-show="!item.status">未完成</label>
          </div>
        </td>
        <td>
          <a href="javascript:;" @click="remove(item.id, item.status)">
            删除</a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
  import {ref } from 'vue'
  const list = ref([
    {
      id:'1', // 当前学习的唯一id
      subject: 'Vue.js', // 学习科目
      content: '学习指令，如v-if', // 学习内容
      place: '自习室', // 学习地点
      status: false // 学习状态，false表示未学习，true表示已学习
    }
  ])
  // 表格删除功能
  const remove = (id, status) => {
    // 如果status是true则可以删除，如果不是则提醒用户先完成学习！
    if(status) {
      list.value = list.value.filter(item => item.id !== id);
    } else {
      alert('请先完成学习')
    }
  }

  // 添加功能
  let subject = ref('') // 输入的科目
  let content = ref('') // 输入的内容
  let nextId = ref('') // 下一个id
  let selectOption = ref('自习室') // 用户选择的学习地点
  let options = ref([
    {placeCode: 0, place: '自习室'},
    {placeCode: 1, place: '图书馆'},
    {placeCode: 2, place: '宿舍'}
  ])
  const add = () => {
    if(subject.value === '') {
      alert('请输入学习科目')
      return;
    }
    // 获取最大值后加1，做为下一个id
    nextId.value = Math.max(...list.value.map(item => item.id)) + 1
    const obj = {
      id:nextId.value, // 当前学习的唯一id
      subject: subject.value, // 学习科目
      content: content.value, // 学习内容
      place: selectOption.value, // 学习地点
      status: false // 学习状态，false表示未学习，true表示已学习
    }
    list.value.push(obj) //将构建好的数据推送到数组中
    subject.value = ''
    content.value = ''
    selectOption.value = '自习室'
  }
</script>